<template>
  <div class="app-main-content test-page">
    <el-row style="height:100%;">
      <el-col :span="12">
        <h3>form test</h3>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item v-oauth label="活动名称" data-oauthUuid="jerj467dadffsgs2dfg">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item v-oauth label="活动区域" data-oauthUuid="4984sgj6sdhfdz3">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item v-oauth label="活动时间" data-oauthUuid="bafga6sg6ads5g19r4">
            <el-col :span="11">
              <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
            </el-col>
          </el-form-item>
          <el-form-item v-oauth label="即时配送" data-oauthUuid="4gasd4g56asdfasd1f">
            <el-switch v-model="form.delivery" />
          </el-form-item>
          <el-form-item label="即时配送">
            <el-switch v-model="form.delivery" disabled />
          </el-form-item>
          <el-form-item v-oauth label="活动性质" data-oauthUuid="4gas4df6adsf1eww">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="美食/餐厅线上活动" name="type" />
              <el-checkbox label="地推活动" name="type" />
              <el-checkbox label="线下主题活动" name="type" />
              <el-checkbox label="单纯品牌曝光" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item v-oauth label="特殊资源" data-oauthUuid="51a56sd1fa56sd1fa">
            <el-radio-group v-model="form.resource">
              <el-radio label="线上品牌商赞助" />
              <el-radio label="线下场地免费" />
            </el-radio-group>
          </el-form-item>
          <el-form-item v-oauth="'textarea'" label="活动形式" :data-oauthUuid="'dsa6g45we1we563344'">
            <el-input v-model="form.desc" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12" class="test-right">
        <h3>button test</h3>
        <el-button v-oauth data-oauthUuid="jerj467dfsgsdfg">默认按钮</el-button>
        <el-button v-oauth data-oauthUuid="s6f4h651h1hwdas" type="primary">主要按钮</el-button>
        <el-button v-oauth data-oauthUuid="s4h89s4dfh6b1s6" type="success">成功按钮</el-button>
        <el-button v-oauth data-oauthUuid="sfdhjyje5665654" type="info">信息按钮</el-button>
        <el-button v-oauth data-oauthUuid="645fdg61are1grg" type="warning">警告按钮</el-button>
        <el-button v-oauth data-oauthUuid="dfj4st4i4461g56" type="danger">危险按钮</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'PermissionFormTest',
  data() {
    return {
      form: {
        name: 'name name name',
        region: 'shanghai',
        date1: 'Date Tue Oct 06 2020 00:00:00 GMT+0800 (中国标准时间)',
        date2: 'Date Wed Oct 28 2020 18:00:25 GMT+0800 (中国标准时间)',
        delivery: true,
        type: ['美食/餐厅线上活动'],
        resource: '线下场地免费',
        desc: 'aaaaaaaaaa'
      },
      menuNodeRules: {
        name: [
          { required: true, message: '请输入路由名称', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入路由路径', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入路由标题', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '请输入路由组件', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style lang="scss">
.test-page{
  height: 100%;
  .el-col{
    padding: 0 10px;
  }
  .test-right{
    border-left:1px solid #eee;
    height: 100%;
    button{
      margin: 0 10px 10px 0;
    }
  }
}
</style>
